// 响应式样式

// 移动端适配
@include mobile {
  // 全局字体调整
  html {
    font-size: 13px;
  }
  
  // 页面容器适配
  .page-container {
    margin: 8px;
    padding: 12px;
    border-radius: 6px;
  }
  
  // 内容区域适配
  .content-box {
    padding: 12px;
  }
  
  // 搜索表单适配
  .search-form {
    padding: 12px;
    
    .el-form-item {
      margin-bottom: 8px;
    }
    
    .search-actions {
      text-align: center;
      margin-top: 12px;
      
      .el-button {
        margin: 4px 2px;
        width: calc(50% - 8px);
      }
    }
  }
  
  // 表格工具栏适配
  .table-toolbar {
    flex-direction: column;
    gap: 8px;
    
    .toolbar-left,
    .toolbar-right {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      
      .el-button {
        margin: 2px;
        font-size: 12px;
      }
    }
  }
  
  // 数据表格适配
  .data-table {
    .el-table {
      font-size: 12px;
      
      .el-table__header {
        .el-table__cell {
          padding: 8px 4px;
        }
      }
      
      .el-table__body {
        .el-table__cell {
          padding: 8px 4px;
        }
      }
      
      .table-actions {
        .el-button {
          padding: 4px 8px;
          font-size: 11px;
          margin-right: 2px;
        }
      }
    }
    
    .table-pagination {
      .el-pagination {
        .el-pagination__sizes,
        .el-pagination__jump {
          display: none;
        }
        
        .el-pager {
          .number {
            min-width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
          }
        }
        
        .btn-prev,
        .btn-next {
          min-width: 28px;
          height: 28px;
          line-height: 28px;
        }
      }
    }
  }
  
  // 表单适配
  .el-form {
    .el-form-item {
      margin-bottom: 12px;
      
      .el-form-item__label {
        font-size: 13px;
        line-height: 1.3;
      }
      
      .el-form-item__content {
        .el-input,
        .el-select,
        .el-date-picker {
          width: 100%;
        }
      }
    }
  }
  
  // 按钮组适配
  .el-button-group {
    .el-button {
      padding: 6px 10px;
      font-size: 12px;
    }
  }
  
  // 对话框适配
  .el-dialog {
    width: 95% !important;
    margin: 2.5vh auto !important;
    
    .el-dialog__header {
      padding: 15px 15px 10px;
      
      .el-dialog__title {
        font-size: 16px;
      }
    }
    
    .el-dialog__body {
      padding: 15px;
      font-size: 13px;
    }
    
    .el-dialog__footer {
      padding: 10px 15px 15px;
      
      .el-button {
        width: calc(50% - 5px);
        margin: 0;
        
        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }
  
  // 抽屉适配
  .el-drawer {
    .el-drawer__header {
      padding: 15px;
      
      .el-drawer__title {
        font-size: 16px;
      }
    }
    
    .el-drawer__body {
      padding: 15px;
    }
  }
  
  // 卡片适配
  .el-card {
    margin-bottom: 12px;
    
    .el-card__header {
      padding: 12px 15px;
      
      .card-header {
        font-size: 14px;
      }
    }
    
    .el-card__body {
      padding: 15px;
    }
  }
  
  // 标签页适配
  .el-tabs {
    .el-tabs__header {
      .el-tabs__item {
        padding: 0 12px;
        font-size: 13px;
      }
    }
    
    .el-tabs__content {
      padding: 15px;
    }
  }
  
  // 菜单适配
  .el-menu {
    .el-menu-item,
    .el-sub-menu__title {
      height: 44px;
      line-height: 44px;
      padding: 0 15px;
      font-size: 14px;
    }
    
    .el-sub-menu {
      .el-menu {
        .el-menu-item {
          height: 40px;
          line-height: 40px;
          font-size: 13px;
        }
      }
    }
  }
  
  // 面包屑适配
  .breadcrumb-container {
    padding: 8px 15px;
    
    .breadcrumb-title {
      font-size: 14px;
    }
    
    .el-breadcrumb {
      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          font-size: 12px;
        }
      }
    }
  }
  
  // 标签视图适配
  .tags-view {
    height: 36px;
    padding: 0 10px;
    
    .tags-view-wrapper {
      .tags-view-item {
        height: 24px;
        line-height: 24px;
        padding: 0 6px;
        margin-right: 4px;
        font-size: 11px;
      }
    }
  }
  
  // 空状态适配
  .empty-state {
    padding: 40px 15px;
    
    .empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }
    
    .empty-text {
      font-size: 13px;
      margin-bottom: 12px;
    }
  }
  
  // 错误状态适配
  .error-state {
    padding: 40px 15px;
    
    .error-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }
    
    .error-title {
      font-size: 16px;
      margin-bottom: 6px;
    }
    
    .error-message {
      font-size: 13px;
      margin-bottom: 12px;
    }
  }
}

// 平板端适配
@include tablet {
  // 页面容器适配
  .page-container {
    margin: 15px;
    padding: 18px;
  }
  
  // 表格工具栏适配
  .table-toolbar {
    .toolbar-left,
    .toolbar-right {
      .el-button {
        font-size: 13px;
      }
    }
  }
  
  // 对话框适配
  .el-dialog {
    width: 85% !important;
    margin: 5vh auto !important;
  }
}

// 大屏适配
@include large-desktop {
  // 页面容器适配
  .page-container {
    max-width: 1400px;
    margin: 20px auto;
  }
  
  // 内容区域适配
  .content-box {
    padding: 24px;
  }
  
  // 搜索表单适配
  .search-form {
    padding: 20px 24px;
  }
  
  // 表格适配
  .data-table {
    .el-table {
      font-size: 14px;
    }
  }
}

// 打印样式
@media print {
  // 隐藏不需要打印的元素
  .no-print,
  .table-toolbar,
  .search-form,
  .table-pagination,
  .el-button,
  .el-pagination {
    display: none !important;
  }
  
  // 页面样式调整
  body {
    font-size: 12px;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }
  
  .page-container,
  .content-box {
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    background: #fff;
  }
  
  // 表格样式调整
  .el-table {
    .el-table__header,
    .el-table__body {
      .el-table__cell {
        padding: 4px 8px;
        border: 1px solid #ddd;
      }
    }
  }
  
  // 强制分页
  .page-break {
    page-break-before: always;
  }
  
  .page-break-after {
    page-break-after: always;
  }
  
  .no-page-break {
    page-break-inside: avoid;
  }
}

// 高对比度模式
@media (prefers-contrast: high) {
  :root {
    --kexilo-border-color: #000;
    --kexilo-border-color-light: #666;
    --kexilo-text-color-primary: #000;
    --kexilo-text-color-secondary: #333;
  }
  
  .el-button {
    border-width: 2px;
  }
  
  .el-input {
    .el-input__wrapper {
      border-width: 2px;
    }
  }
}

// 减少动画模式
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
